// 扩展vue原有功能：全局组件，自定义指令，挂载原型方法，
// import XtxSkeleton from './xtx.-skyleton.vue'
// import XtxCarousel from './xtx-carousel.vue'
// import XtxMore from './xtx-more.vue'
import defaultImg from '@/assets/images/200.png'
// import XtxBread from './xtx-bread.vue'
// import XtxBreadItem from './xtx-bread-item.vue'
const importFn = require.context('./', false, /\.vue$/)
import Message from './Message';


export default {
    install(app) {
        //在app上扩展，app提供component，directive
        // app.component(XtxSkeleton.name, XtxSkeleton)
        // app.component(XtxCarousel.name, XtxCarousel)
        // app.component(XtxMore.name, XtxMore)
        // app.component(XtxBread.name, XtxBread)
        // app.component(XtxCheckbox.name, XtxCheckbox)
        // 定义指令
        importFn.keys().forEach(path => {
            const component = importFn(path).default
            app.component(component.name, component)
        });

        defineDirective(app)
            // 定义原型函数
        app.config.globalProperties.$message = Message
    }
}

const defineDirective = (app) => {
    // 图片懒加载
    app.directive('lazy', {
        mounted(el, binding) {
            const observe = new IntersectionObserver(([{ isIntersecting }]) => {
                if (isIntersecting) {
                    // 停止观察
                    observe.unobserve(el)
                    el.onerror = () => {
                        el.src = defaultImg
                    }
                    el.src = binding.value
                }
            }, {
                threshold: 0
            })
            observe.observe(el)
        }
    })
}